import React from 'react';
// image
import echartIconMedia from '@assets/images/detail-iqiyi.png';
import echartIconTV from '@assets/images/detail-weibo.png';
import echartIconRadio from '@assets/images/detail-tencent.png';


import EchartBars from '@components/EchartType/EchartBar.jsx';
import './echart.scss';

export default class EchartBar extends React.Component {
  constructor(props) {
    super(props);
    this.dataTypes = [
      { name: '新媒体', icon: `image://${echartIconMedia}`, textStyle: { color: '#fff' } },
      { name: '电视', icon: `image://${echartIconTV}`, textStyle: { color: '#fff' } },
      { name: '广播', icon: `image://${echartIconRadio}`, textStyle: { color: '#fff' } }];
  }




  render() {
    let sevenYAxis = ["09-08", "09-09", "09-10", "09-11", "09-12", "09-13", "09-14"];
    let sevenDayData = [{"name":"新媒体","type":"bar","barGap":"50%","label":{"normal":{"position":"top","distance":10}},"data":[{"value":0.35,"label":{"show":true}},{"value":0.05,"label":{"show":true}},{"value":0.12,"label":{"show":true}},{"value":0.01,"label":{"show":true}},{"value":1.22,"label":{"show":true}},{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}}]},{"name":"电视","type":"bar","barGap":"50%","label":{"normal":{"position":"top","distance":10}},"data":[{"value":23.98,"label":{"show":true}},{"value":11.99,"label":{"show":true}},{"value":0.01,"label":{"show":true}},{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}},{"value":0.04,"label":{"show":true}},{"value":9.14,"label":{"show":true}}]},{"name":"广播","type":"bar","barGap":"50%","label":{"normal":{"position":"top","distance":10}},"data":[{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}},{"value":0,"label":{"show":false}}]}];
    return (
      <div className="echart-bar-container">
        <EchartBars
          dataTypes={ this.dataTypes }
          yAxisData={ sevenYAxis }
          seriesData={ sevenDayData }
        />
      </div>
    )
  }
}